<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib  prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib  prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="defaultImg" value="${redis:getSysConfig('website_default_img')}"/>
<c:set var="srcPath" value="${redis:getSysConfig('sysFileVisitRoot_back')}"/>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<c:set var="uploadPath" value="${redis:getSysConfig('uploadFileVisitRoot')}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>首页楼层数据</title>
	<jsp:include page="../../util/import.jsp"/>
	<%--bootstrap_tree css文档--%>
	<link rel="stylesheet" type="text/css" href="${srcPath}/3thParty/bootstrap_tree/css/bootstrap-treeview.css"/>
	<%--bootstrap_tree js文档--%>
	<script type="text/javascript" src="${srcPath}/3thParty/bootstrap_tree/js/bootstrap-treeview.js"></script>

	<script type="text/javascript">

        $(function () {
            /**参数1：加载树节点的url，参数2：当前业务下主键名称约定**/
            initHomeTree('${basePath}/back/shopHomeMiddleCategoryBilateral/getNodes.sjson','categoryId');
        });

        function showBilateralList() {
            var $tt_bilateral= $("#tt_bilateral").bootstrapTable({
                url: '${basePath}/back/shopHomeMiddleCategoryBilateral/listShopHomeMiddleCategoryBilateral.sjson ',        	/**请求后台的URL（*）**/
                method: 'post',                       	/**请求方式（*）**/
                contentType: "application/x-www-form-urlencoded",
                dataType: 'json',
                toolbar: '#toolbar',               	    /**工具按钮用哪个容器**/
                striped: true,                      	/**是否显示行间隔色**/
                cache: false,                       	/**是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）**/
                pagination: true,                   	/**是否显示分页（*）**/
                sortable: false,                    	/**是否启用排序**/
                sortOrder: 'asc',                   	/**排序方式**/
                queryParamsType: '',
                sidePagination: 'server',           	/**分页方式：client客户端分页，server服务端分页（*）**/
                pageNumber: 1,
                pageSize:10,							/**初始化加载第一页，默认第一页**/
                pageList: [5,10, 25, 50],        	    /**可供选择的每页的行数（*）**/
                search: false,                       	/**是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大**/
                strictSearch: true,
                showColumns: true,                  	/**是否显示所有的列**/
                showRefresh: true,                  	/**是否显示刷新按钮**/
                minimumCountColumns: 2,             	/**最少允许的列数**/
                clickToSelect: true,                	/**是否启用点击选中行**/
                uniqueId: 'bilateralId',                /**每一行的唯一标识，一般为主键列**/
                singleSelect  : true,                   /** 单选checkbox**/
                showToggle:false,                    	/**是否显示详细视图和列表视图的切换按钮**/
                cardView: false,                    	/**是否显示详细视图**/
                detailView: false,                  	/**是否显示父子表**/
                columns: [
                    {checkbox: true},
                    {field: 'Number', title: '编号',align: 'center',valign: 'middle',width:'50px',
                        formatter: function (value, row, index) {
                            var page = $tt_bilateral.bootstrapTable("getPage");
                            return page.pageSize * (page.pageNumber - 1) + index + 1;
                        }
                    },
                    {field:"title",title:"标题",align: 'center',valign: 'middle',
                        formatter:function(value,row,index){
                            var a_html = '<a data-toggle="modal" data-target="#detailModal" href="#" mce_href="#" onclick="detailInfo('+row.bilateralId+')">' + value + '</a>';
                            return a_html;
                        }
                    },
                    {field:"synopsis",title:"描述",align: 'center',valign: 'middle'},
                    {field:"imageUrl",title:"图片",align: 'center',valign: 'middle',
                        formatter:function(value,row,index){
                            var a_img_html='<div><a  data-toggle="modal" data-target="#detailModal" href="#" mce_href="#" onclick="showListRebackImage('+index+',1,1,\'tt_bilateral\'),detailInfo('+row.bilateralId+')"><img id="uploadImg_'+index+'" class="uploadImg" onMouseOver="showListBigImage('+index+',4,4,0,-40,\'tt_bilateral\')" onMouseOut="showListRebackImage('+index+',1,1,\'tt_bilateral\')" src="${uploadPath}/' + row.imageUrl + '" onerror="this.src=\'${srcPath}/common/images/mrbj.png\'"  width="30px" height="30px"/></a></div>';
                            return a_img_html;
                        }
                    },
                    {field:"link",title:"链接地址",align: 'center',valign: 'middle'},
                    {field:"type",title:"类型",align: 'center',valign: 'middle',
                        formatter:function(value,row,index){  //function里面的三个参数代表当前字段值，当前行数据对象，行号（行号从0开始）
                            <c:forEach items="${redis:getHomeKeyBook('middleBilateral')}" var="kb">
                            if(value=="${kb.value}"){
                                return "${kb.name}";
                            }
                            </c:forEach>
                        }
                    },
                    {field:"sortCode",title:"排序号",align: 'center',valign: 'middle'},
                    {field:"isShow",title:"是否显示",align: 'center',valign: 'middle',
                        formatter:function(value,row,index){  //function里面的三个参数代表当前字段值，当前行数据对象，行号（行号从0开始）
                            if(value == 1){
                                return "<font class='color_001'>已显示</font>";
                            }else{
                                return "<font class='color_002'>未显示</font>";
                            }
                        }
                    }
                ],
                queryParams: function (params) {
                    /**特别说明，返回的参数的值为空，则当前参数不会发送到服务器端,这种指定请求参数的方式和datatables控价类似**/
                    params.title = $("#q_title_bilateral").val();
                    params.type = $("#q_type_bilateral").val();
                    params.isShow = $("#q_isShow_bilateral").val();
                    params.categoryId = $("#q_categoryId_bilateral").val();
                    params.currentPage = params.pageNumber;
                    return params;
                }
            });
        }

        function showTabList() {
            var $tt_tab = $("#tt_tab").bootstrapTable({
                url: '${basePath}/back/shopHomeMiddleCategoryTAB/listShopHomeMiddleCategoryTAB.sjson', /**请求后台的URL（*）**/
                method: 'post', 						/**请求方式（*）**/
                contentType: "application/x-www-form-urlencoded",
                dataType: 'json',
                toolbar: '#toolbar_tab',               	/**工具按钮用哪个容器**/
                striped: false, 						/**是否显示行间隔色**/
                cache: false, 							/**是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）**/
                pagination: true, 						/**是否显示分页（*）**/
                sortable: false, 						/**是否启用排序**/
                sortOrder: 'asc', 						/**排序方式**/
                queryParamsType: '',
                sidePagination: 'server', 				/**分页方式：client客户端分页，server服务端分页（*）**/
                pageNumber: 1,
                pageSize: 10, 							/**初始化加载第一页，默认第一页**/
                pageList: [5, 10, 25, 50], 				/**可供选择的每页的行数（*）**/
                search: false, 							/**是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大**/
                strictSearch: true,
                showColumns: true, 						/**是否显示所有的列**/
                showRefresh: true, 						/**是否显示刷新按钮**/
                minimumCountColumns: 2, 				/**最少允许的列数**/
                clickToSelect: true, 					/**是否启用点击选中行**/
                uniqueId: 'categoryTabId', 				/**每一行的唯一标识，一般为主键列**/
                singleSelect: true, 					/** 单选checkbox**/
                showToggle: false, 						/**是否显示详细视图和列表视图的切换按钮**/
                cardView: false, 						/**是否显示详细视图**/
                detailView: false, 						/**是否显示父子表**/
                columns: [
                    {checkbox: true},
                    {
                        field: 'Number', title: '编号', align: 'center', valign: 'middle', width: '50px',
                        formatter: function (value, row, index) {
                            var page = $tt_tab.bootstrapTable("getPage");
                            return page.pageSize * (page.pageNumber - 1) + index + 1;
                        }
                    },
                    {
                        field: "title", title: "标题", align: 'center', valign: 'middle',
                        formatter: function (value, row, index) {
                            var a_html = '<a data-toggle="modal" data-target="#detailModalTab" href="#" mce_href="#" onclick="detailInfoTab(' + row.categoryTabId + ')">' + value + '</a>';
                            return a_html;
                        }
                    },
                    {field: "synopsis", title: "描述", align: 'center', valign: 'middle'},
                    {field: "imageUrl", title: "图片", align: 'center', valign: 'middle',
                        formatter: function (value, rowData, rowIndex) {
                            var a_img_html_tab='<div><a  data-toggle="modal" data-target="#detailModalTab" href="#" mce_href="#" onclick="showListRebackImage('+(rowIndex+10)+',1,1,\'tt_tab\'),detailInfoTab('+rowData.categoryTabId+')"><img id="uploadImg_'+(rowIndex+10)+'" class="uploadImg" onMouseOver="showListBigImage('+(rowIndex+10)+',4,4,0,-40,\'tt_tab\')" onMouseOut="showListRebackImage('+(rowIndex+10)+',1,1,\'tt_tab\')" src="${uploadPath}/' + rowData.imageUrl + '" onerror="this.src=\'${srcPath}/common/images/mrbj.png\'"  width="30px" height="30px"/></a></div>';
                            return a_img_html_tab;
                        }
                    },
                    {field: "link", title: "链接地址", align: 'center', valign: 'middle'},
                    {field: "imageType", title: "图片类型", align: 'center', valign: 'middle',
                        formatter: function (value, row, index) {  //function里面的三个参数代表当前字段值，当前行数据对象，行号（行号从0开始）
                            <c:forEach items="${redis:getHomeKeyBook('middleTAB')}" var="kb">
                            if (value =="${kb.value}") {
                                return "${kb.name}";
                            }
                            </c:forEach>
                        }
                    },
                    {field: "sortCode", title: "排序号", align: 'center', valign: 'middle'},
                    {field: "isShow", title: "是否显示", align: 'center', valign: 'middle',
                        formatter: function (value, row, index) {  //function里面的三个参数代表当前字段值，当前行数据对象，行号（行号从0开始）
                            if (value == 1) {
                                return "<font class='color_001'>已显示</font>";
                            } else {
                                return "<font class='color_002'>未显示</font>";
                            }
                        }
                    }
                ],
                queryParams: function (params) {
                    /**特别说明，返回的参数的值为空，则当前参数不会发送到服务器端,这种指定请求参数的方式和datatables控价类似**/
                    params.title = $("#q_title_tab").val();
                    params.imageType = $("#q_imageType_tab").val();
                    params.isShow = $("#q_isShow_tab").val();
                    params.categoryId = $("#q_categoryId_tab").val();
                    params.currentPage = params.pageNumber;
                    return params;
                }
            });
        }

        /**
         * bootstrap treeview  初始化渲染加载树形结构
         * data：json节点信息
         */
        function initHomeTree(getJsonDataUrl,idName){
            $("#table_tab").hide();
            $.ajax({
                type:"post",
                url:getJsonDataUrl,
                success:function(data){
                    var data = JSON.parse(data);
                    checkableTree = $('#tv').treeview({
                        data: data,
                        showIcon: true,
                        showCheckbox: false,
                        showTags:true,
                        bootstrap2: false,
                        levels:5
                    });

                    /**节点行选中**/
                    checkableTree.on('nodeSelected', function(event, data) {
                        var isLeaf=data.isLeaf;
                        if(isLeaf=="0"){
                            $("#table_tab").hide();
                            $("#table_bilateral").show();
                            showBilateralList();
                            $("#q_"+idName+"_bilateral").val(data['categoryId']); /**将当前的分类id放到隐藏域中**/
                            $("#tt_bilateral").bootstrapTable('refresh');
                        }else if(isLeaf=="1"){
                            showTabList();
                            $("#table_bilateral").hide();
                            $("#table_tab").show();
                            $("#q_"+idName+"_tab").val(data['categoryId']); /**将当前的分类id放到隐藏域中**/
                            $("#tt_tab").bootstrapTable('refresh');
                        }

                    });

                    checkableTree.treeview('expandNode', [ 0, { levels: 1, silent: true } ]);/** 默认展开所有一级：0是根id，levels当前为一级**/
                }
            });
            showBilateralList();
        }

        /**
         * 删除首页中间分类左右两侧数据
         */
		<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_delete">
        function deleteInfo(){
            /**获取选中行的id**/
            var selectedRow= $("#tt_bilateral").bootstrapTable('getSelections');
            if(selectedRow.length==1){
                var id=selectedRow[0].bilateralId;
                showConfirm("你确定要删除吗?", function() {
                    $.ajax({
                        type: "POST",
                        dataType: "JSON",
                        url: "${basePath}/back/shopHomeMiddleCategoryBilateral/deleteHomeMiddleCategoryBilateral.sjson",
                        data: {bilateralId:id},
                        success: function(data){
                            if(data.success==true){
                                /**重新刷新列表数据**/
                                $("#tt_bilateral").bootstrapTable('refresh');
                            }
                        }
                    });
                });
            }else{
                showMsg("请选择一行记录！");
            }
        }
        </shiro:hasPermission>

        /**
         * 删除首页中间部分tab数据
         */
		<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_delete">
        function deleteInfoTab() {
            /**获取选中行的id**/
            var selectedRow = $("#tt_tab").bootstrapTable('getSelections');
            if (selectedRow.length == 1) {
                var id = selectedRow[0].categoryTabId;
                showConfirm("你确定要删除吗?", function () {
                    $.ajax({
                        type: "POST",
                        dataType: "JSON",
                        url: "${basePath}/back/shopHomeMiddleCategoryTAB/deleteHomeMiddleCategoryTAB.sjson",
                        data: {categoryTabId: id},
                        success: function (data) {
                            if (data.success == true) {
                                /**重新刷新列表数据**/
                                $("#tt_tab").bootstrapTable('refresh');
                            }
                        }
                    });
                });
            } else {
                showMsg("请选择一行记录！");
            }
        }
        </shiro:hasPermission>

        $(function(){
            /**表单查询**/
            $("#btn_query_bilateral").click(function () {
                $("#tt_bilateral").bootstrapTable('refresh');
            });
        });

        $(function(){
            /**表单查询**/
            $("#btn_query_tab").click(function () {
                $("#tt_tab").bootstrapTable('refresh');
            });
        });

	</script>
</head>
<body>

<div id="customer-main-panel" class="panel-body">

	<div style="width: 12%;margin:5px;float:left;" id="tv"></div>

	<!-- 渲染的table -->
	<div id="table_bilateral" style="float:left;margin-left: 15px;width: 86%;">
		<!-- 查询条件 -->
		<div class="panel panel-default">
			<div class="panel-heading">首页楼层数据查询</div>
			<div class="panel-body">
				<form id="qform_bilateral" class="form-horizontal">
					<div class="form-group" style="margin-top:15px">
						<div class="col-sm-3" >
							<div class="input-group input-group-sm">
								<span class="input-group-addon">标题</span>
								<input type="text" class="form-control" id="q_title_bilateral" name="title" placeholder="请输入标题"/>
							</div>
						</div>
						<div class="col-sm-3">
							<div class="input-group input-group-sm">
								<span class="input-group-addon">类型</span>
								<select id="q_type_bilateral" class="form-control">
									<option value="">--请选择--</option>
									<c:forEach items="${redis:getHomeKeyBook('middleBilateral')}" var="kb">
										<option value="${kb.value}" >${kb.name}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="col-sm-3" >
							<div class="input-group input-group-sm">
								<span class="input-group-addon">是否显示</span>
								<select id="q_isShow_bilateral" class="form-control">
									<option value="">--请选择--</option>
									<option value="0">未显示</option>
									<option value="1">已显示</option>
								</select>
							</div>
						</div>
						<div>
							<!-- 设置当前分类列表的父分类Id -->
							<input type="hidden" id="q_categoryId_bilateral" name="categoryId" value="${categoryId}"/>
						</div>

						<div class="col-sm-3">
							<button type="button" id="btn_query_bilateral" class="btn btn-primary">查询</button>&nbsp;&nbsp;
							<button type="reset" class="btn btn-success" id="resetBtn_bilateral">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_add">
				<button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addOrEditModal" onclick="addInfo()">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_update">
				<button id="btn_edit" type="button" class="btn btn-default" data-toggle="modal"  onclick="editInfo()">
					<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_delete">
				<button id="btn_delete" type="button" class="btn btn-default" onclick="deleteInfo()">
					<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
				</button>
			</shiro:hasPermission>
		</div>
		<table id="tt_bilateral"></table>
	</div>

	<div id="table_tab" style="float:left;margin-left: 15px;width: 86%;">
		<!-- 查询条件 -->
		<div class="panel panel-default">
			<div class="panel-heading">首页楼层数据查询</div>
			<div class="panel-body">
				<form id="qform_tab" class="form-horizontal">
					<div class="form-group" style="margin-top:15px">
						<div class="col-sm-3" >
							<div class="input-group input-group-sm">
								<span class="input-group-addon">标题</span>
								<input type="text" class="form-control" id="q_title_tab" name="title" placeholder="请输入标题"/>
							</div>
						</div>
						<div class="col-sm-3" >
							<div class="input-group input-group-sm">
								<span class="input-group-addon">图片类型</span>
								<select id="q_imageType_tab" class="form-control">>
									<option value="">--请选择--</option>
									<c:forEach items="${redis:getHomeKeyBook('middleTAB')}" var="kb">
										<option value="${kb.value}" >${kb.name}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="col-sm-3" >
							<div class="input-group input-group-sm">
								<span class="input-group-addon">是否显示</span>
								<select id="q_isShow_tab" class="form-control">
									<option value="">--请选择--</option>
									<option value="0">未显示</option>
									<option value="1">已显示</option>
								</select>
							</div>
						</div>
						<div>
							<!-- 设置当前分类列表的父分类Id -->
							<input type="hidden" id="q_categoryId_tab" name="categoryId" value="${categoryId}"/>
						</div>

						<div class="col-sm-3">
							<button type="button" id="btn_query_tab" class="btn btn-primary">查询</button>&nbsp;&nbsp;
							<button type="reset" class="btn btn-success" id="resetBtn_tab">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<!-- 工具栏 -->
		<div id="toolbar_tab" class="btn-group">
			<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_add">
				<button id="btn_add_tab" type="button" class="btn btn-default" data-toggle="modal" data-target="#addOrEditModalTab" onclick="addInfoTab()">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_update">
				<button id="btn_edit_tab" type="button" class="btn btn-default" data-toggle="modal" onclick="editInfoTab()">
					<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_delete">
				<button id="btn_delete_tab" type="button" class="btn btn-default" onclick="deleteInfoTab()">
					<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
				</button>
			</shiro:hasPermission>
		</div>
		<table id="tt_tab"></table>
	</div>

	<!-- 添加首页中间分类左右两侧数据页 -->
	<jsp:include page="addOrEditBilateral.jsp"/>
	<!-- 首页中间分类左右两侧数据详情页 -->
	<jsp:include page="detailBilateral.jsp"/>
	<!-- 添加修改首页中间部分tab信息页 -->
	<jsp:include page="addOrEditTab.jsp"/>
	<!-- 首页中间部分tab信息详情页 -->
	<jsp:include page="detailTab.jsp"/>

</div>

</body>
</html>

</html>

